<template>
  <div id="app" >
    <div :class="[isShowing ? blurClass : '',bkClass]">
      <h3>Let's trigger this here modal!</h3>
      <button @click="toggleShow">
        <span v-if="isShowing">Hide child</span>
        <span v-else>Show child</span>
      </button>

    </div>

    <transition name="fade">
      <HelloWorld v-if="isShowing" class="modal">
        <button @click="toggleShow">
          Close
        </button>
      </HelloWorld>
    </transition>

  </div>
</template>

<script>
  import HelloWorld from './components/HelloWorld.vue'

  export default {
    name: 'app',
    data(){
      return {
        isShowing:false,
        bkClass: 'bk',
        blurClass: 'blur'
      }
    },
    components: {
      HelloWorld
    },
    methods:{
      toggleShow() {
        this.isShowing = !this.isShowing;
      }
    }

  }
</script>

<style>
  .bk {
    transition: all 0.1s ease-out;
  }

  .blur {
    filter: blur(2px);
    opacity: 0.4;
  }
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }
  .fade-enter-active, .fade-leave-active {
    transition: opacity 0.25s ease-out;
  }

  .fade-enter, .fade-leave-to {
    opacity: 0;
  }
</style>
